<template>
<!--    <el-menu style="height: 100%;" :default-openeds="[]">-->
        <div>
            <div v-for="(item,ind) in list">
                <el-submenu :index="index + ind + ''" v-if="item.children != null">
                    <template slot="title">
                        <!--                <i class="el-icon-message"></i>-->
                        {{item.title}}</template>
                    <div v-for="(v,i) in item.children">
                        <el-menu-item v-if="v.children == null" :index="JSON.stringify({'url':v.url,'name':v.title}) "> {{v.title}}</el-menu-item>
                        <SecondMenu v-else :index="index + i + '-'" :list="[v]"></SecondMenu>

                    </div>

                </el-submenu>
                <el-menu-item :index="JSON.stringify({'url':item.url,'name':item.title})" v-else>
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.title}}</span>
                </el-menu-item>
            </div>
        </div>


<!--    </el-menu>-->
</template>
<script>
    import eventHub from "../../../utils/eventHub";
    // import MainMenu from "./MainMenu";
    export default {
        name: "SecondMenu",
        props:{
            list:Array,
            index:String
        },
        components:{
            // MainMenu,
        },
        methods: {
            handleClick (){
                console.log(222)
                let params = "dsa"
                eventHub.$emit("change", params)
            }
        }
    }

</script>
<style scoped>
    .about{

    }
</style>
